<template>
  <view class="causeOfHarm">
    <view class="search">
      <u-search
          class="searchContent"
          shape="square"
          placeholder="请输入关键字进行搜索"
          v-model="keyword"
          :clearabled="true"
          bgColor="#FFFFFF"
          :showAction="false"></u-search>
      <u-button text="搜索" type="primary" :custom-style="searchStyle" @click="onsubmit"></u-button>
    </view>
    <view class="content">
      <u-checkbox-group v-model="checked" placement="column" @change="checkedValue" :labelSize='32'>
        <u-checkbox activeColor="#53c21d" v-for="(item,index) in list" :label="item.label" :name="JSON.stringify(item)"
                    shape="circle" :key="index" style="padding: 10px 20px">
        </u-checkbox>
      </u-checkbox-group>
    </view>
<!--    <view class="submit">-->
<!--      <u-button text="确定" @click="toHotWork" type="primary"></u-button>-->
<!--    </view>-->
  </view>
</template>

<script>
import {afetyMeasuresListAPI} from "../../../../api/api";

export default {
  data() {
    return {
      list: [],
      checked: [],
      searchStyle: {
        width: '100rpx',
        height: '64rpx',
        padding: '20rpx',
        marginLeft: '30rpx'
      },
      keyword: '',
      option:[],
    }
  },
  mounted() {
    this.getHazardIdentificationList()
  },
  methods: {
    toHotWork(){
      console.log(this.option.map((item) => JSON.parse(item)))
      this.$emit('option123',this.option.map((item) => JSON.parse(item)))
    },
    checkedValue(e) {
      this.option = e
    },
    onsubmit() {
      this.getHazardIdentificationList()
    },
    getHazardIdentificationList() {
      afetyMeasuresListAPI({aqcs: this.keyword,pageSize:11000,pageNum:1}).then((r) => {
        this.list = r.data.list.map((e)=>{
          return {label:e.aqcs,value:e.id}
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.causeOfHarm {
  height: 80vh;
  background: #f6f6f6;

  .submit {
    width: 90%;
    margin: 15px auto 0;
  }

  .search {
    width: 90%;
    display: flex;
    padding: 10px 0;
    margin: 0 auto !important;
    background: #f6f6f6;

    .searchContent {
      width: 92%;
      margin: 0 auto !important;

    }
  }

  .content {
    padding: 10px 0;
    border-radius: 8px;
    width: 92%;
    height: 75%;
    margin: 0 auto;
    background: #F6F6F6;
    overflow-y: auto;
  }
}
</style>
